<template>
    <div id="register">
        <div class="register-container">
            <h2 class="title">REGISTER</h2>
            <div class="input-container">
                <input type="text" v-model="account" placeholder="账号" autocomplte="false"/>
            </div>
            <div class="input-container">
                <input type="text" v-model="name" placeholder="昵称" autocomplte="false"/>
            </div>
            <div class="input-container">
                <input type="text" v-model="email" placeholder="邮箱" autocomplte="false"/>
            </div>
            <div class="input-container">
                <input type="password" v-model="password" placeholder="密码" autocomplte="false"/>
            </div>
            <div class="input-container">
                <input type="password" v-model="password_confirmation" placeholder="确认密码" autocomplte="false"/>
            </div>
            <p>if you  have a account,please <span class="login-btn" v-on:click="goLogin">login</span></p>
            <div class="input-container">
                <span class="register-btn" v-on:click="register">REGISTER</span>
            </div>
        </div>
    </div>
</template>

<script>
    import userApi from '../api/user.js';
    export default {
        name: "Register",
        components:{

        },
       data(){
            return {
                account:'',
                password:'',
                name:'',
                email:'',
                password_confirmation:''
            }
       },
        methods:{
            register(){
                if(this.account.trim()===''||this.password.trim()===''){
                    this.$toast('账号或者密码不能为空');
                    return false;
                }
                if(this.name.trim()===''){
                    this.$toast('昵称不能为空');
                    return false;
                }
                if(this.email.trim()===''){
                    this.$toast('邮箱不能为空');
                    return false;
                }
                userApi.register({
                    account:this.account,
                    name:this.name,
                    email:this.email,
                    password:this.password,
                    password_confirmation: this.password_confirmation
                }).then(function (response) {
                    var token = response.data.data.token;
                    if(token){
                        window.localStorage.setItem('token',token);
                    }
                    this.$router.push({path:'/'})
                }.bind(this)).catch(function (error){
                    if(error.response){
                        var res = error.response;
                        this.$toast(res.data.message);
                    }
                }.bind(this))
            },
            goLogin(){
                this.$router.push({name:'login'});
            }
        }
    }
</script>

<style lang="scss">
    body{

    }
    #register{
        width: 100%;
        background: url("/images/login_bg.jpg") no-repeat;
        background-size: 100% 100%;
        height: 100%;
        -webkit-font-smoothing: antialiased;
        position: fixed;
        align-items: center;


        div.register-container{
            width: 40%;
            margin: 10% auto 0;
            background: rgba(4,4,4,0.56);
            box-shadow: 0px 35px 44px -22px #1f181b;
            padding: 60px 40px;


            h2.title{
                font-size: 19px;
                margin-bottom: 1.5em;
                color: #fff;
                text-align: center;
                letter-spacing: 2px;
            }

            div.input-container{
                position: relative;
                input{
                    outline: none;
                    background: transparent;
                    border: none;
                    border-bottom: 1px solid #DCCBCF;
                    color: #fff;
                    -webkit-appearance: none;
                }
                input:focus{
                    box-shadow: none;
                }

                span.register-btn{
                    display: block;
                    background: white;
                    color: #000;
                    cursor: pointer;
                    width: 120px;
                    height: 35px;
                    line-height: 35px;
                    margin: 0 auto;
                    text-align: center;
                    border-radius: 17px;
                }
            }
            p{
                color: white;
                text-align: center;
            }
            span.login-btn{
                color: #df5799;
                cursor: pointer;
            }
        }
    }
</style>
